<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>套餐页面组件预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #eee;
            padding: 10px;
        }
        
        .container {
            max-width: 375px;
            margin: 0 auto;
            background-color: #fff;
        }
        
        /* 轮播图样式 */
        .swiper-box {
            height: 220px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }
        
        /* 套餐信息组件样式 */
        .package-info {
            background-color: #fff;
            margin-bottom: 10px;
        }
        
        .package-header {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .package-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .package-price {
            display: flex;
            align-items: baseline;
        }
        
        .price-symbol {
            font-size: 14px;
            color: #ff4757;
        }
        
        .price-value {
            font-size: 24px;
            color: #ff4757;
            font-weight: bold;
            margin-right: 5px;
        }
        
        .price-unit {
            font-size: 14px;
            color: #666;
        }
        
        .package-details {
            padding: 15px;
        }
        
        .detail-item {
            display: flex;
            margin-bottom: 10px;
        }
        
        .detail-label {
            width: 80px;
            font-size: 14px;
            color: #666;
            flex-shrink: 0;
        }
        
        .detail-content {
            flex: 1;
            font-size: 14px;
            color: #333;
        }
        
        /* 物料系列组件样式 */
        .material-series {
            margin-bottom: 10px;
            background-color: #fff;
        }
        
        .series-header {
            padding: 10px 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .series-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .series-content {
            padding: 0 15px;
        }
        
        .product-item {
            display: flex;
            /* align-items: flex-start; */
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .product-item:last-child {
            border-bottom: none;
        }

        /* 第一列：复选框 */
        .product-checkbox {
            width: 20px;
            margin-right: 10px;
            padding-top: 5px;
        }

        .checkbox {
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            cursor: pointer;
        }

        .checkbox.checked {
            background-color: #ff6b35;
            border-color: #ff6b35;
        }

        .checkmark {
            color: #fff;
            font-size: 12px;
            font-weight: bold;
        }

        /* 第二列：产品图片 */
        .product-image-wrapper {
            margin-right: 10px;
        }

        .product-image {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999;
        }
        
        /* 第三列：产品详细信息 */
        .product-details {
            flex: 1;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 6px;
        }

        .detail-row:last-child {
            margin-bottom: 0;
        }

        .product-name {
            flex: 1;
            font-size: 14px;
            color: #333;
            font-weight: 500;
            line-height: 1.4;
            margin-right: 10px;
        }

        .product-price {
            font-size: 16px;
            color: #ff4757;
            font-weight: bold;
            white-space: nowrap;
        }

        .detail-label {
            font-size: 12px;
            color: #666;
        }

        .detail-value {
            font-size: 12px;
            color: #333;
        }

        .gift-tag {

        }

        .gift-text {
            background-color: #ff6b35;
            color: #fff;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
        }
        
        /* 底部导航样式 */
        .navigation {
            display: flex;
            justify-content: space-between;
            border: solid 1px #eee;
            background-color: #ffffff;
            padding: 8px;
        }
        
        .left {
            display: flex;
            font-size: 10px;
            align-items: center;
        }
        
        .item {
            margin: 0 15px;
            text-align: center;
        }
        
        .right {
            display: flex;
            font-size: 14px;
            align-items: center;
        }
        
        .btn {
            line-height: 33px;
            padding: 0 15px;
            border-radius: 18px;
            color: #ffffff;
            background-color: #ed3f14;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 轮播图 -->
        <div class="swiper-box">
            好丰年 轻企客人群有好包装
        </div>
        
        <!-- 套餐信息组件 -->
        <div class="package-info">
            <div class="package-header">
                <div class="package-name">好丰年套餐</div>
                <div class="package-price">
                    <span class="price-symbol">￥</span>
                    <span class="price-value">10000</span>
                    <span class="price-unit">/套</span>
                </div>
            </div>
            <div class="package-details">
                <div class="detail-item">
                    <div class="detail-label">套餐介绍</div>
                    <div class="detail-content">套餐包含多种优质产品，为您提供全方位的解决方案</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">开始时间</div>
                    <div class="detail-content">2024-01-01</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">结束时间</div>
                    <div class="detail-content">2024-12-31</div>
                </div>
            </div>
        </div>
        
        <!-- 物料系列-主产品 -->
        <div class="material-series">
            <div class="series-header">
                <div class="series-title">物料系列-主产品</div>
            </div>
            <div class="series-content">
                <div class="product-item">
                    <!-- 第一列：复选框 -->
                    <div class="product-checkbox">
                        <div class="checkbox checked">
                            <span class="checkmark">✓</span>
                        </div>
                    </div>

                    <!-- 第二列：产品图片 -->
                    <div class="product-image-wrapper">
                        <div class="product-image">图片</div>
                    </div>

                    <!-- 第三列：产品详细信息 -->
                    <div class="product-details">
                        <!-- 第一行：产品名称和价格 -->
                        <div class="detail-row">
                            <div class="product-name">蒙牛中老年高钙奶粉</div>
                            <div class="product-price">￥200</div>
                        </div>

                        <!-- 第二行：分组和数量 -->
                        <div class="detail-row">
                            <span class="detail-label">900g</span>
                            <span class="detail-value">1*10</span>
                        </div>

                        <!-- 第三行：类型和赠品 -->
                        <div class="detail-row">
                            <span class="detail-label">必填</span>
                            <div class="gift-tag">
                                <!-- 这里可以显示赠品标签 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 物料系列-次主品 -->
        <div class="material-series">
            <div class="series-header">
                <div class="series-title">物料系列-次主品</div>
            </div>
            <div class="series-content">
                <div class="product-item">
                    <!-- 第一列：复选框 -->
                    <div class="product-checkbox">
                        <div class="checkbox">
                        </div>
                    </div>

                    <!-- 第二列：产品图片 -->
                    <div class="product-image-wrapper">
                        <div class="product-image">图片</div>
                    </div>

                    <!-- 第三列：产品详细信息 -->
                    <div class="product-details">
                        <!-- 第一行：产品名称和价格 -->
                        <div class="detail-row">
                            <div class="product-name">蒙牛中老年高钙奶粉</div>
                            <div class="product-price">￥200</div>
                        </div>

                        <!-- 第二行：分组和数量 -->
                        <div class="detail-row">
                            <span class="detail-label">900g</span>
                            <span class="detail-value">1*10</span>
                        </div>

                        <!-- 第三行：类型和赠品 -->
                        <div class="detail-row">
                            <span class="detail-label">必填</span>
                            <div class="gift-tag">
                                <span class="gift-text">赠品</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 物料系列-辅品 -->
        <div class="material-series">
            <div class="series-header">
                <div class="series-title">物料系列-辅品</div>
            </div>
            <div class="series-content">
                <div class="product-item">
                    <!-- 第一列：复选框 -->
                    <div class="product-checkbox">
                        <div class="checkbox">
                        </div>
                    </div>

                    <!-- 第二列：产品图片 -->
                    <div class="product-image-wrapper">
                        <div class="product-image">图片</div>
                    </div>

                    <!-- 第三列：产品详细信息 -->
                    <div class="product-details">
                        <!-- 第一行：产品名称和价格 -->
                        <div class="detail-row">
                            <div class="product-name">蒙牛中老年高钙奶粉</div>
                            <div class="product-price">￥200</div>
                        </div>

                        <!-- 第二行：分组和数量 -->
                        <div class="detail-row">
                            <span class="detail-label">900g</span>
                            <span class="detail-value">1*10</span>
                        </div>

                        <!-- 第三行：类型和赠品 -->
                        <div class="detail-row">
                            <span class="detail-label">必填</span>
                            <div class="gift-tag">
                                <!-- 无赠品 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 物料系列-物料 -->
        <div class="material-series">
            <div class="series-header">
                <div class="series-title">物料系列-物料</div>
            </div>
            <div class="series-content">
                <div class="product-item">
                    <!-- 第一列：复选框 -->
                    <div class="product-checkbox">
                        <div class="checkbox">
                        </div>
                    </div>

                    <!-- 第二列：产品图片 -->
                    <div class="product-image-wrapper">
                        <div class="product-image">图片</div>
                    </div>

                    <!-- 第三列：产品详细信息 -->
                    <div class="product-details">
                        <!-- 第一行：产品名称和价格 -->
                        <div class="detail-row">
                            <div class="product-name">蒙牛中老年高钙奶粉</div>
                            <div class="product-price">￥200</div>
                        </div>

                        <!-- 第二行：分组和数量 -->
                        <div class="detail-row">
                            <span class="detail-label">900g</span>
                            <span class="detail-value">1*10</span>
                        </div>

                        <!-- 第三行：类型和赠品 -->
                        <div class="detail-row">
                            <span class="detail-label">必填</span>
                            <div class="gift-tag">
                                <!-- 无赠品 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="navigation">
            <div class="left">
                <div class="item">
                    <div>🛒</div>
                    <div>购物车</div>
                </div>
                <div class="item">
                    <div style="font-size: 14px;color: red;">合计：￥0</div>
                    <div style="font-size: 14px;">总数量：0</div>
                </div>
            </div>
            <div class="right">
                <div class="btn">加入购物车</div>
            </div>
        </div>
    </div>
</body>
</html>
